<template>
	<view class="content">
		<p class="loginLogo">渡爱商城</p>
		<p class="loginTitle">忘记密码</p>
		<form>
			<view class="form-group">
				<label for="phoneNumber">手机号</label>
				<input id="phoneNumber" v-model="phoneNumber" type="text" placeholder="请输入手机号" />
			</view>
			<view class="form-group">
				<label for="phoneNumber">验证码</label>
				<input id="verificationCode" v-model="verificationCode" type="text" placeholder="请输入验证码" />
				<view @click="getCode" :disabled="isCounting" class="getCode">{{ countdownText }}</view>
			</view>
			<view class="form-group">
				<label for="password">新密码</label>
				<input id="password" v-model="password" type="password" placeholder="请输入新密码" />
			</view>
			<view class="form-group">
				<label for="confirmPassword">确认密码</label>
				<input id="confirmPassword" v-model="confirmPassword" type="password" placeholder="请再次输入新密码" />
			</view>
			<view class="buttonBox">
				<view class="button01" @click="handleEditPassword()">完成</view>
				<view class="button02" @click="goLogin()">返回登录</view>
			</view>

		</form>
	</view>
</template>

<script>
	import {
		getCodeEditPassword,
		EditPassword
	} from '@/api/login.js';

	export default {
		data() {
			return {
				phoneNumber: '',
				verificationCode: '',
				password: '',
				confirmPassword: '',
				isCounting: false,
				countdownTime: 60,
				countdownText: '获取验证码'
			};
		},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: '/pages/my/login/h5-login'
				})
			},
			validatePhoneNumber() {
				const phoneRegex = /^1[3456789]\d{9}$/;
				return phoneRegex.test(this.phoneNumber);
			},
			async getCode() {
				if (!this.validatePhoneNumber()) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				if (this.isCounting) return;

				try {
					const response = await getCodeEditPassword({
						phoneNumber: this.phoneNumber
					});
					if (response.code == 200) {
						this.startCountdown();
					}
				} catch (error) {
					console.error('获取验证码失败:', error);
					uni.showToast({
						title: '获取验证码失败',
						icon: 'none'
					});
				}
			},
			startCountdown() {
				this.isCounting = true;
				let timer = setInterval(() => {
					this.countdownTime--;
					this.countdownText = `${this.countdownTime}s后重新获取`;
					if (this.countdownTime <= 0) {
						clearInterval(timer);
						this.isCounting = false;
						this.countdownTime = 60;
						this.countdownText = '获取验证码';
					}
				}, 1000);
			},
			async handleEditPassword() {
				if (!this.validatePhoneNumber()) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}

				try {
					const response = await EditPassword({
						phoneNumber: this.phoneNumber,
						verificationCode: this.verificationCode,
						password: this.password,
						confirmPassword: this.confirmPassword
					});
					// 修改密码成功后的逻辑
					console.log('密码修改成功:', response);
					if (response.code == 200) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('修改密码失败:', error);
				}
			}
		}
	};
</script>

<style lang="scss">
	@import './login.scss';
</style>